<template>
    <div :class="`review-action-bar ${mode} ${styleMode}`">
        <div class="price" :style="`${fontColor}`">
            <span class="label">￥</span>{{price}}
            <div class="origin-price tip-color" v-if="discount">
                共优惠<span class="label">￥</span>{{discount}}
            </div>
        </div>
        <Button :disabled="isDisable" class="action-btn" :style="themeBackround" :round="buttonRound" size="large" @click="payNow">立即支付</Button>
    </div>
</template>

<script>
import { Button } from 'vant';
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewActionBar', // 操作bar
    mixins: [ModeMixin],
    components: {
        Button,
    },
    props: {
        price: {
            type: [Number, String],
            default: 0,
        },
        discount: [Number, String],
        isDisable: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        payNow() {
            if (this.$props.isDisable) {
                return;
            }
            this.$emit('pay');
        },
    },
};
</script>

<style lang="less" scoped>
.review-action-bar {
    .flex();
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: @footer-height;
    background-color: @white;
    box-shadow: 0px -4px 8px 0px rgba(51,51,51,0.03);
    .p-h(@shop-bag-gap);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .mode-white();
    .price {
        .flex();
        font-size: 23px;
        color: @text-color;
        font-weight: 500;
        font-family: @font-family-number;
        align-items: baseline;
        color: @shop-price-color;
        .label {
            .m-r(-3);
        }
        .origin-price {
            font-size: @shop-font-size;
            font-weight: 400;
            color: @tip-color;
            opacity: 0.7;
            height: 13px;
            line-height: 13px;
            border-left: 1px solid @tip-color;
            .m-l(@shop-gap);
            .p-l(@shop-gap);
        }
    }
    .action-btn {
        width:124px;
        &.del {
            background-color: @red !important;
        }
    }
}
</style>
